<template>
  <div class="mainBox">
    <div class="titleInfo">
      <div>
        <span>当前地点:</span>
        <el-input v-model="curAddress.address">
        </el-input>
      </div>
      <div>
        <span>经度：</span><el-input v-model="curAddress.longitude"></el-input>
        <span>纬度：</span><el-input v-model="curAddress.latitude"></el-input>
      </div>
    </div>
    <baidu-map class="bm-view"
      ak="Eiq54hk875tQbaKay0iypzb991NmzoG2"
      :center="mapData.center"
      :zoom="mapData.zoom"
      :scroll-wheel-zoom="true"
      @ready="mapHandler"
      @click="getLocation">
      <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
      <!-- <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation> -->
    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  },
  data () {
    return {
      // center: { lng: 0, lat: 0 },
      // zoom: 3
      // 地图数据
      mapData: {
        // 中心坐标
        center: { lng: 0, lat: 0 },
        // 缩放级别
        zoom: 13
      },
      // BMap类
      BMap: null,
      // 地图对象
      map: null,
      curAddress: {
        address: undefined,
        // 经度
        longitude: undefined,
        // 纬度
        latitude: undefined
      }
    }
  },
  methods: {
    // // 百度地图初始化
    // handler ({ BMap, map }) {
    //   console.log(BMap, map)
    //   this.center.lng = 116.404
    //   this.center.lat = 39.915
    //   this.zoom = 15
    // },
    // 地图预处理
    async mapHandler ({ BMap, map }) {
      // if (this.businessId) {
      //   // 可以在此处请求接口获取坐标数据
      //   await this.getMallBusinessDetail()
      // }
      // 保存百度地图类
      this.BMap = BMap
      // 保存地图对象
      this.map = map

      this.mapData.center.lng = 116.404
      this.mapData.center.lat = 39.915
      // 如果一开始坐标存在(编辑的时候)
      // if (this.businessDetail.longitude && this.businessDetail.latitude) {
      //   // 设置坐标
      //   this.mapData.center.lng = this.businessDetail.longitude
      //   this.mapData.center.lat = this.businessDetail.latitude
      // } else {
      //   // 如果坐标不存在则动态获取当前浏览器坐标（创建的时候）
      //   const geolocation = new BMap.Geolocation()
      //   // 获取当前的坐标（使用promise 将异步转换为同步）
      //   await new Promise((resolve) => {
      //     geolocation.getCurrentPosition((r) => {
      //       this.mapData.center.lng = this.businessDetail.longitude =
      //         r.point.lng
      //       this.mapData.center.lat = this.businessDetail.latitude = r.point.lat
      //       resolve()
      //     })
      //   })
      // }
      // 创建定位标记
      const marker = new BMap.Marker(
        new BMap.Point(
          this.mapData.center.lng,
          this.mapData.center.lat
        )
      )
      // 将标记添加到地图上
      map.addOverlay(marker)
    },
    // 在地图上选择区域
    getLocation (e) {
      // 设置经度
      this.curAddress.longitude = e.point.lng
      // 设置纬度
      this.curAddress.latitude = e.point.lat
      // 百度地图类
      const BMapGL = this.BMap
      // 地图对象
      const map = this.map
      // 清除地图上所有的覆盖物(保证每次点击只有一个标记)
      map.clearOverlays()
      // 创建定位标记
      const marker = new BMapGL.Marker(new BMapGL.Point(e.point.lng, e.point.lat))
      // 将标记添加到地图上
      map.addOverlay(marker)
      // 创建坐标解析对象
      const geoc = new BMapGL.Geocoder()
      // 解析当前的坐标成地址
      geoc.getLocation(e.point, (rs) => {
        // 获取地址对象
        const addressComp = rs.addressComponents
        console.log('地址对象', rs.addressComponents)
        // 拼接出详细地址

        this.curAddress.address =
          addressComp.province +
          addressComp.city +
          addressComp.district +
          addressComp.street +
          addressComp.streetNumber

        // this.businessDetail.address =
        //   addressComp.province +
        //   addressComp.city +
        //   addressComp.district +
        //   addressComp.street +
        //   addressComp.streetNumber
      })
    }
  }
}
</script>

<style lang="stylus">
  .mainBox
    width: 70%;
    margin: 180px auto 0 auto
  .bm-view
    height: 400px
    padding: 4px
    border: 1px solid red
    box-shadow: 0 0 20px #aaa
  .titleInfo {
    display: flex
    justify-content: space-between
  }
</style>
